<template>
  <div v-loading="loading" class="pvchart">
    <div class="left">
      <div class="bg">
        <div class="titles"><span>浏览趋势</span><span class="a"><i v-for="(item,idx) in type"
                                                                :class="[item.key==checktype?'cur':'']"
                                                                @click="checkType(item.key)"
        >{{ item.name }}</i></span></div>
        <div class="echarts" id="pvchart-echart"></div>
      </div>
    </div>
    <div class="right">
      <div class="bg">
        <div class="titles">{{ show.fulldate }}</div>
        <div class="data-msg">
          <div class="msgItem">
            <div class="icon">
              <svg t="1742362907389" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg"
                   p-id="1683" width="40" height="40"
              >
                <path
                  d="M512 512m-496.484848 0a496.484848 496.484848 0 1 0 992.969696 0 496.484848 496.484848 0 1 0-992.969696 0Z"
                  fill="#3177FD" p-id="1684"
                ></path>
                <path
                  d="M498.036364 449.939394L729.212121 601.987879s-51.2 13.963636-82.230303 26.375757l44.99394 58.957576c7.757576 10.860606 6.206061 27.927273-4.654546 35.684849-10.860606 7.757576-27.927273 6.206061-35.684848-4.654546l-46.545455-62.060606c-27.927273 24.824242-62.060606 58.957576-62.060606 58.957576L498.036364 449.939394z m103.951515-15.515152l82.230303-65.163636c-3.10303-6.206061-3.10303-12.412121-3.10303-20.169697 0-29.478788 24.824242-54.30303 55.854545-54.30303s55.854545 24.824242 55.854545 54.30303-26.375758 54.30303-57.40606 54.30303c-9.309091 0-17.066667-1.551515-24.824243-6.20606L626.812121 465.454545c-9.309091 7.757576-21.721212 6.206061-29.478788-3.10303-6.206061-7.757576-4.654545-21.721212 4.654546-27.927273z m-145.842424 29.478788c-7.757576 6.206061-20.169697 6.206061-26.375758-1.551515l-21.721212-26.375757c-4.654545 1.551515-10.860606 3.10303-17.066667 3.10303h-4.654545l-62.060606 125.672727c10.860606 9.309091 18.618182 24.824242 18.618181 40.339394 0 29.478788-24.824242 54.30303-55.854545 54.30303s-55.854545-24.824242-55.854545-54.30303 24.824242-54.30303 54.30303-54.30303l63.612121-128.775758c-9.309091-9.309091-15.515152-23.272727-15.515151-37.236363 0-29.478788 24.824242-54.30303 55.854545-54.303031s55.854545 24.824242 55.854545 54.303031c0 10.860606-3.10303 20.169697-7.757575 27.927272l20.169697 24.824243c7.757576 7.757576 7.757576 20.169697-1.551515 26.375757z m-65.163637-102.4c-10.860606 0-20.169697 9.309091-20.169697 21.721212 0 10.860606 9.309091 21.721212 20.169697 21.721213 10.860606 0 21.721212-9.309091 21.721212-21.721213s-10.860606-21.721212-21.721212-21.721212z m-102.4 263.757576c10.860606 0 21.721212-9.309091 21.721212-21.721212 0-10.860606-9.309091-21.721212-21.721212-21.721212-10.860606 0-20.169697 9.309091-20.169697 21.721212-1.551515 12.412121 7.757576 21.721212 20.169697 21.721212z m448.387879-257.551515c10.860606 0 21.721212-9.309091 21.721212-21.721212 0-10.860606-9.309091-21.721212-21.721212-21.721212-10.860606 0-20.169697 9.309091-20.169697 21.721212 0 12.412121 9.309091 21.721212 20.169697 21.721212z"
                  fill="#FFFFFF" p-id="1685"
                ></path>
              </svg>
            </div>
            <div class="text">
              <div class="t">浏览次数</div>
              <div class="n">{{ show.data.pv }}</div>
            </div>
          </div>
          <div class="msgItem">
            <div class="icon">
              <svg t="1742363356633" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1887" width="40" height="40"><path d="M512 1024C229.216 1024 0 794.784 0 512S229.216 0 512 0s512 229.216 512 512-229.216 512-512 512z m174.208-718.208h-24.864V256H611.52v49.792H412.48V256h-49.792v49.792h-24.864c-27.52 0-49.792 22.272-49.792 49.76V704c0 27.52 22.272 49.792 49.792 49.792h348.416c27.52 0 49.792-22.304 49.792-49.792V355.552c0-27.52-22.272-49.76-49.792-49.76zM512 380.448a74.656 74.656 0 1 1 0.032 149.376A74.656 74.656 0 0 1 512 380.448z m149.344 298.656h-298.688v-24.896c0-49.76 99.552-77.12 149.344-77.12 49.792 0 149.344 27.36 149.344 77.12v24.896z" fill="#F04631" p-id="1888"></path></svg>
            </div>
            <div class="text">
              <div class="t">独立访客</div>
              <div class="n">{{ show.data.uv }}</div>
            </div>
          </div>
          <div class="msgItem">
            <div class="icon">
              <svg t="1742363537543" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2090" width="40" height="40"><path d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z" fill="#FF6A00" p-id="2091"></path><path d="M512 149.333333c200.298667 0 362.666667 162.368 362.666667 362.666667s-162.368 362.666667-362.666667 362.666667S149.333333 712.298667 149.333333 512 311.701333 149.333333 512 149.333333z m0 40.298667C333.952 189.632 189.632 333.952 189.632 512S333.952 834.368 512 834.368 834.368 690.048 834.368 512 690.048 189.632 512 189.632z" fill="#FFFFFF" p-id="2092"></path><path d="M512 298.666667c200.298667 0 362.666667 100.288 362.666667 224S712.298667 746.666667 512 746.666667 149.333333 646.378667 149.333333 522.666667 311.701333 298.666667 512 298.666667z m0 40.746666c-180.906667 0-322.368 87.36-322.368 183.253334S331.093333 705.92 512 705.92s322.368-87.36 322.368-183.253333S692.906667 339.413333 512 339.413333z" fill="#FFFFFF" p-id="2093"></path><path d="M746.666667 512c0 200.298667-105.066667 362.666667-234.666667 362.666667s-234.666667-162.368-234.666667-362.666667S382.4 149.333333 512 149.333333s234.666667 162.368 234.666667 362.666667z m-42.666667 0c0-180.906667-91.52-322.368-192-322.368S320 331.093333 320 512s91.52 322.368 192 322.368S704 692.906667 704 512z" fill="#FFFFFF" p-id="2094"></path><path d="M469.333333 384v277.333333h-38.101333v-198.101333l-45.717333 35.669333L362.666667 467.2zM554.666667 661.333333V384h38.101333v198.101333l45.717333-35.669333L661.333333 578.133333z" fill="#FFFFFF" p-id="2095"></path></svg>
            </div>
            <div class="text">
              <div class="t">独立IP</div>
              <div class="n">{{ show.data.ip }}</div>
            </div>
          </div>
          <div class="msgItem">
            <div class="icon">
              <svg t="1742363637665" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2353" width="40" height="40"><path d="M512 1024c282.766222 0 512-229.233778 512-512S794.766222 0 512 0 0 229.233778 0 512s229.233778 512 512 512z m-0.398222-349.923556c-101.404444-0.056889-197.916444-42.780444-265.102222-117.361777a72.931556 72.931556 0 0 1 0-98.076445C313.685333 384.028444 410.225778 341.333333 511.601778 341.333333c101.432889 0 197.973333 42.752 265.130666 117.361778 25.173333 27.960889 25.201778 69.973333 0.056889 97.991111-67.214222 74.581333-163.754667 117.304889-265.187555 117.390222z m0-88.547555c44.373333-0.085333 80.270222-35.356444 80.327111-78.904889 0-43.548444-36.010667-78.848-80.355556-78.819556-44.373333 0-80.327111 35.328-80.298666 78.876445 0 43.548444 35.953778 78.848 80.327111 78.848z m0-107.235556c15.928889 0 28.871111 12.686222 28.871111 28.330667a28.387556 28.387556 0 0 1-17.834667 26.254222 29.297778 29.297778 0 0 1-31.488-6.144 27.989333 27.989333 0 0 1-6.257778-30.947555c4.465778-10.609778 15.018667-17.521778 26.709334-17.493334z" fill="#498AE6" p-id="2354"></path></svg>
            </div>
            <div class="text">
              <div class="t">访问次数</div>
              <div class="n">{{ show.data.session }}</div>
            </div>
          </div>
          <div class="msgItem">
            <div class="icon">
              <svg t="1742363687227" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7685" width="40" height="40"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m256 762.311111c0 42.666667-34.133333 76.8-76.8 76.8H310.044444c-42.666667 0-76.8-34.133333-76.8-76.8V261.688889c0-42.666667 34.133333-76.8 76.8-76.8h307.2l153.6 153.6v423.822222z" fill="#1aaba8" p-id="7686"></path><path d="M600.177778 318.577778v-85.333334h-273.066667c-28.444444 0-45.511111 14.222222-45.511111 42.666667v469.333333c0 28.444444 17.066667 45.511111 45.511111 45.511112h344.177778c28.444444 0 54.044444-14.222222 54.044444-45.511112v-398.222222h-93.866666c-17.066667 2.844444-31.288889-11.377778-31.288889-28.444444zM597.333333 628.622222h-190.577777c-11.377778 0-19.911111-8.533333-19.911112-19.911111 0-11.377778 8.533333-19.911111 19.911112-19.911111H597.333333c11.377778 0 19.911111 8.533333 19.911111 19.911111 0 11.377778-11.377778 19.911111-19.911111 19.911111z m0-76.8h-190.577777c-11.377778 0-19.911111-8.533333-19.911112-19.911111 0-11.377778 8.533333-19.911111 19.911112-19.911111H597.333333c11.377778 0 19.911111 8.533333 19.911111 19.911111 0 11.377778-11.377778 19.911111-19.911111 19.911111z m19.911111-96.711111c0 11.377778-8.533333 19.911111-19.911111 19.911111h-190.577777c-11.377778 0-19.911111-8.533333-19.911112-19.911111 0-11.377778 8.533333-19.911111 19.911112-19.911111H597.333333c8.533333 0 19.911111 8.533333 19.911111 19.911111z" fill="#1aaba8" p-id="7687"></path></svg>
            </div>
            <div class="text">
              <div class="t">浏览页数</div>
              <div class="n">{{ show.data.averageupv }}</div>
            </div>
          </div>
          <div class="msgItem">
            <div class="icon">
              <svg t="1742363825940" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13447" width="40" height="40"><path d="M512 0c282.752 0 512 229.248 512 512s-229.248 512-512 512S0 794.752 0 512 229.248 0 512 0z m99.498667 714.794667c-47.786667 0-73.088 10.666667-114.346667 39.808l-8.021333 5.546666c-28.202667 19.157333-44.544 24.917333-76.8 24.917334-35.114667 0-51.328-6.826667-84.736-30.464l-8.576-5.973334c-36.352-24.618667-61.312-33.834667-105.685334-33.834666a25.6 25.6 0 1 0 0 51.2c35.157333 0 51.328 6.826667 84.736 30.464l8.618667 5.973333c36.352 24.618667 61.312 33.834667 105.642667 33.834667 47.786667 0 73.088-10.666667 114.346666-39.808l8.021334-5.546667c28.245333-19.157333 44.544-24.917333 76.8-24.917333 35.2 0 51.413333 6.826667 84.821333 30.464l8.618667 5.973333c36.394667 24.618667 61.354667 33.834667 105.728 33.834667a25.6 25.6 0 1 0 0-51.2c-35.2 0-51.413333-6.826667-84.821334-30.464l-8.618666-5.973334c-36.352-24.618667-61.312-33.834667-105.728-33.834666z m0-175.701334c-47.786667 0-73.088 10.709333-114.346667 39.850667l-8.021333 5.546667c-28.202667 19.114667-44.544 24.874667-76.8 24.874666-35.114667 0-51.328-6.826667-84.736-30.421333l-8.576-5.973333c-36.352-24.618667-61.312-33.877333-105.685334-33.877334a25.6 25.6 0 1 0 0 51.2c35.157333 0 51.328 6.869333 84.736 30.464l8.618667 5.973334c36.352 24.618667 61.312 33.834667 105.642667 33.834666 47.786667 0 73.088-10.666667 114.346666-39.808l8.021334-5.546666c28.245333-19.114667 44.544-24.917333 76.8-24.917334 35.2 0 51.413333 6.869333 84.821333 30.464l8.618667 5.973334c36.394667 24.618667 61.354667 33.834667 105.728 33.834666a25.6 25.6 0 1 0 0-51.2c-35.2 0-51.413333-6.826667-84.821334-30.421333l-8.618666-5.973333c-36.352-24.618667-61.312-33.877333-105.728-33.877334z m20.138666-351.36H392.362667l-5.973334 0.298667a60.970667 60.970667 0 0 0-47.402666 31.274667L286.464 315.690667 256 315.733333l-4.138667 0.341334A25.6 25.6 0 0 0 256 366.933333h16.810667c0.810667 1.322667 1.706667 2.56 2.730666 3.754667v106.154667l0.384 4.181333a25.6 25.6 0 0 0 50.858667-4.181333V353.877333l-0.341333-4.138666v-0.170667l57.472-105.728 1.493333-2.005333a9.856 9.856 0 0 1 6.954667-2.901334h239.274666l2.56 0.341334c2.517333 0.725333 4.693333 2.389333 5.930667 4.650666l57.472 105.642667a25.770667 25.770667 0 0 0-0.384 4.309333v122.965334l0.341333 4.181333a25.6 25.6 0 0 0 50.858667-4.181333l0.042667-106.154667a25.514667 25.514667 0 0 0 2.730666-3.754667H768l4.138667-0.341333A25.6 25.6 0 0 0 768 315.733333l-30.506667-0.042666-52.437333-96.341334-3.157333-5.12a61.013333 61.013333 0 0 0-50.261334-26.496z m-23.808 95.872H419.413333L384 341.333333v128h256V341.333333l-32.170667-57.728z" fill="#03DF7E" p-id="13448"></path></svg>
            </div>
            <div class="text">
              <div class="t">访问深度</div>
              <div class="n">{{ show.data.averagepv }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getCnzz } from '@/api/data'

export default {
  name: 'Pvchart',
  data() {
    return {
      loading: true,
      data: [],
      show: [],
      checktype: 'pv',
      type: [
        { name: '浏览次数(PV)', key: 'pv' },
        { name: '独立访客(UV)', key: 'uv' },
        { name: 'ip', key: 'ip' },
        { name: '新独立访客', key: 'newuv' },
        { name: '访问次数', key: 'session' }
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    checkType(type) {
      if (this.data.length > 0) {
        this.initChart(type)
      }
    },
    getData() {
      getCnzz().then(r => {
        if (r.code == 200) {
          this.loading = false
          this.data = r.data
          this.show = r.data[r.data.length - 1]
          this.initChart('pv')
        }
      })
    },
    initChart(type) {

      this.checktype = type
      let data = this.data
      let options = {
        grid: {
          left: '50px',
          right: '0',
          top: '30px',
          bottom: '10%'
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: data.map(item => {
            return item.dateSimple
          })
        },
        tooltip: {
          trigger: 'axis'
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: function(value, index) {
              // 将数值转换为千位，并添加'K'
              if (value >= 1000) {
                return (value / 1000).toFixed(0) + 'K'
              } else {
                return value
              }
            }
          }
        },
        series: [
          {
            data: data.map(item => {
              return item.data[type]
            }),
            type: 'line',
            smooth: true,
            showSymbol: false,
            // symbol: 'value',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: 'rgba(22, 100, 255, .3)' },
                    { offset: 1, color: '#409EFF' }
                  ])

                }

              }
            }
          }
        ]
      }
      this.$nextTick(() => {
        let chart = echarts.init(document.getElementById('pvchart-echart'), null, { devicePixelRatio: 2 })
        chart.setOption(options)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.data-msg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow: hidden;
  height:203px;
  padding-top:10px;
  .msgItem{
    display: flex;
    width: 50%;
    //margin-top:23px;
  }
  .text {
    margin-left: 8px;
    .t {
      font-size: 14px;
      color: #666;
    }

    .n {
      font-size: 22px;
      color: rgb(64, 158, 255);
      margin-top: 2px;
      font-family: "阿里妈妈数黑体 Bold";
    }
  }
}

.pvchart {
  height: 280px;
  display: flex;
  overflow: hidden;

  .left {
    width: 70%;
    height: 100%;

    .echarts {
      height: 200px;
    }
  }

  .right {
    height: 100%;
    margin-left: 20px;
    width: calc(30% - 20px);
  }
}

::v-deep .bg {
  .titles {
    align-items: baseline;

    .a {
      display: flex;
      position: relative;
      top: 10px;
      right: -10px;
      z-index: 100;

      i {
        margin-right: 10px;
        font-size: 12px;
        font-style: normal;
        font-weight: normal;
        cursor: pointer;
        line-height: 20px;
        color: #666;

        &.cur {
          color: rgb(64, 158, 255);
        }
      }
    }
  }
}
</style>
